<template>
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-logo">
          <img src="https://cdn.pixabay.com/photo/2018/07/06/22/48/avatar-3521787_960_720.png" alt="Anime Logo" />
          <h2>二次元小天地</h2>
        </div>
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">隐私政策</a>
        </div>
        <p class="footer-copyright">&copy; 2025 版权所有</p>
      </div>
      <div class="footer-decoration">
        <div v-for="(star, index) in 15" :key="index" class="star" :style="{ left: `${Math.random() * 100}%`, animationDelay: `${Math.random() * 5}s` }"></div>
      </div>
    </footer>
  </template>
  
  <script setup>
  // 组件逻辑
  </script>
  
  <style scoped>
  /* 整体底部样式 */
  .footer {
    position: relative;
    background: linear-gradient(135deg, #ff7eb9, #73a6ff);
    color: white;
    padding: 40px 0;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    overflow: hidden;
  }
  
  /* 底部内容容器 */
  .footer-content {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  
  /* 底部 logo 部分 */
  .footer-logo img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
  }
  
  .footer-logo h2 {
    font-size: 24px;
    margin: 0;
  }
  
  /* 底部链接部分 */
  .footer-links {
    margin: 20px 0;
  }
  
  .footer-links a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.3s ease;
  }
  
  .footer-links a:hover {
    color: #ffd700;
  }
  
  /* 版权声明部分 */
  .footer-copyright {
    font-size: 14px;
    margin-top: 20px;
  }
  
  /* 装饰星星 */
  .footer-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .star {
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
  }
  
  @keyframes twinkle {
    0%, 100% {
      opacity: 0.2;
      transform: scale(0.8);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
  }
  </style>    